<template>
  <div>
    <el-backtop></el-backtop>
    <el-container>
      <el-header>
        <el-row>
          <el-col :offset=6 :span=12>
            <div>
              <el-autocomplete :fetch-suggestions="querySearchAsync"
                               @select="handleSelect"
                               placeholder="搜索/检索文件"
                               v-model="keyword"
                               popper-class="search-popper"
                               :debounce="searchType === 'content'? 1500 : 300"
                               >
                <el-select v-model="searchType" slot="prepend">
                  <el-option label="文件" value="file"></el-option>
                  <el-option label="内容" value="content"></el-option>
                </el-select>
                <template slot-scope="{ item }">
                  <div class="search-result-title">
                    <FileTypeIcon :file-type="item.fileType" />
                    {{item.title}}
                  </div>
                  <div class="search-result-content" :v-if="!isSearchFile">
                    <ul>
                      <li v-for="(highlight,index) in item.highlights"
                          :key="item.title + '-' + index"
                          @click.stop="handleHighlightClick(item.id, item.title, item.fileType, highlight.subNo)"
                      >
                        <span v-html="highlight.highlight"></span>
                      </li>
                    </ul>
                  </div>
                </template>
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-autocomplete>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row>
            <el-col :offset=4 :span=16>
              <el-divider></el-divider>
            </el-col>
        </el-row>
        <el-row>
          <el-col :offset=4 :span=16>
            <div class="file-tools">
              <el-button @click="backDirectory"
                         :disabled="this.route.length <= 1"
                         size="small"
                         circle
                         class="backBtn"
                         type="primary"
              >
                <i class="el-icon-back"></i>
              </el-button>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="(dir,index) in route" :key="dir.id">
                  <span class="directory-router" :class="{'bold':route.length === index + 1}" @click="toDirectory(dir.id)">
                    {{dir.title}}
                  </span>
                </el-breadcrumb-item>
              </el-breadcrumb>
              <el-button-group class="operateBtn">
                <el-button size="mini" type="success" icon="el-icon-folder-add" @click="showTitleModal4Add"></el-button>
                <el-button size="mini" type="success" icon="el-icon-upload" @click="showAddFileModal"></el-button>
                <el-button size="mini" type="warning" icon="el-icon-rank" @click="showMoveFileModal"></el-button>
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="showTitleModal4Edit"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-folder-remove" @click="del"></el-button>
              </el-button-group>
            </div>
          </el-col>
        </el-row>
        <el-row class="file-row">
          <el-col :offset=4 :span=16>
            <el-card shadow="hover">
              <div class="file-container">
                <el-checkbox-group  v-model="selectFiles">
                  <div class="file-row"
                       v-for="file in files"
                       :key="file.id"
                  >
                    <el-checkbox :value="file.id" :label="file.id">
                      <div class="file-desc"
                           @click.prevent="file.directoryFlag ? toDirectory(file.id) : openFile(file.id, file.title, file.fileType)"
                      >
                        <FileTypeIcon :file-type="file.fileType" />
                        {{file.title}}
                      </div>
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <TitleModal :dialog-form-visible="titleModal.show"
               v-if="titleModal.show"
               @onClose="titleModal.show = false"
               @onSuccess="refreshCurrent"
               :pid="route.length > 0 ? route[route.length - 1].id : 0"
               :files="files"
               :file="titleModal.file"
    ></TitleModal>

    <AddFileModal :dialog-form-visible="addFileModal.show"
                  v-if="addFileModal.show"
                  @onClose="addFileModal.show = false"
                  @onSuccess="refreshCurrent"
                  :files="files.filter(file => !file.directoryFlag)"
                  :pid="route.length > 0 ? route[route.length - 1].id : 0"
    ></AddFileModal>

    <MoveFileModal :dialog-form-visible="moveFileModal.show"
                   v-if="moveFileModal.show"
                   @onClose="moveFileModal.show = false"
                   @onSuccess="refreshCurrent"
                   :file-ids="selectFiles"
                   :parent-id="this.route[this.route.length - 1].id"
    ></MoveFileModal>

    <LoginModal
        :dialog-show="loginModal.show"
        @onClose="hideLogin"
    ></LoginModal>
  </div>
</template>

<script src="./js/Home.js"></script>
<style scoped lang="less" src="./css/Home.less" />
<style lang="less" src="./css/unScoped.less" />
